<template>
    <el-form ref="form" :rules="rules" :model="form" label-width="100px" class="mt-10">
        <el-form-item label="应用包名" prop="package">
            <el-input v-model="form.package" placeholder="应用包名"></el-input>
        </el-form-item>
        <el-form-item label="APPID" prop="package">
            <el-form label-width="100px" label-position="top" inline>
                <el-form-item :label="channel.label" v-for="channel in options.channels" :key="channel.value">
                    <el-input v-model="form.appids[channel.value]" placeholder="三方APPID"></el-input>
                </el-form-item>
            </el-form>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
            <el-input type="textarea" v-model="form.remark" :autosize="{ minRows: 4}" placeholder="备注"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" :loading="loading" @click="submit">确定</el-button>
            <el-button @click="cancel">返回</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
    data() {
        return {
            loading: false,
            form: {
                package: "",
                appids: {},
                remark: "",
            },
            rules: {
                // source: {required: true, message: '请选择应用渠道', trigger: 'blur',},
                channel: {required: true, message: '请选择推广渠道', trigger: 'blur',},
                package: {required: true, message: '请输入应用包名', trigger: 'blur',},
                appid: {required: true, message: '请输入三方APPID', trigger: 'blur',},
            },
            all: [],
            options: this.$store.state.appAppid.options,
            isCreate: true,
        }
    },
    methods: {
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) return false;
                this.loading = true;
                let form = this.$helper.deepClone(this.form);
                this.$store.dispatch("appAppid/BatchUpdate", form).then(res => {
                    this.$message.success(res.data.message);
                    this.$emit('submit');
                }).finally(() => {
                    this.loading = false;
                });
            });
        },
        cancel() {
            this.$emit('cancel');
        },
        syncForm() {
            if (!this.all.length) this.$store.dispatch("appAppid/All", "appAppid");
        },
    },
    created() {
        this.syncForm();
    }
}
</script>

<style lang="scss" scoped>
.item-row {
    margin: 0 0 10px 0;
}
</style>

